<!-- 交友 -->
<template>
	<view class="friends">
		<!-- 图片选择 -->
		<view class="content">
			<view class="header flex_r_between">
				<text>图片</text>
				<text>{{images.length}}/9</text>
			</view>
			<view class="image flex_center">
				<view class="photos flex_c" v-if="images.length < 9" @click="chooseImage">
					<image :src="$util.prefix('partner/partner_image_up.png')" mode="aspectFill">
					</image>
				</view>

				<view class="image_item" v-for="(item,index) in images" :key="index">
					<image :src="item" mode="aspectFill" @click="$util.previewImage(images,index)"></image>
					<view class="detele flex_r_around" @click="onDeleteImage(index)">
						<u-icon name="close-circle-fill" color="#FD2A53" size="40rpx"></u-icon>
					</view>
				</view>

			</view>
		</view>

		<!-- 个人介绍 -->
		<view class="textarea">
			<textarea placeholder="请填写自我介绍" placeholder-class="input-placeholder" v-model="introduce"></textarea>
		</view>

		<view class="title">基础信息</view>

		<view class="input flex_r_between">
			<view class="label flex_center">
				<image :src="`${$util.prefix('public/icon_shengao.png')}`" mode="aspectFill"></image>
				<text>身高</text>
			</view>
			<view class="container flex_center">
				<input type="number" placeholder="请输入" placeholder-class="input-placeholder"
					v-model="content.mine.height" />
				<view class="text_label">cm</view>
			</view>
		</view>

		<view class="input flex_r_between">
			<view class="label flex_center">
				<image :src="`${$util.prefix('public/icon_nianling.png')}`" mode="aspectFill"></image>
				<text>年龄</text>
			</view>
			<view class="container flex_center">
				<input type="number" placeholder="请输入" placeholder-class="input-placeholder"
					v-model="content.mine.age" />
				<view class="text_label">岁</view>
			</view>
		</view>

		<view class="input flex_r_between">
			<view class="label flex_center">
				<image :src="`${$util.prefix('public/icon_jiaxiang.png')}`" mode="aspectFill"></image>
				<text>家乡</text>
			</view>
			<view class="container flex_center" @click="chooseAddress">
				<view class="view" :id="content.mine.province ? 'have' : ''">{{ content.mine.province || '请选择' }}
					{{ content.mine.city || '' }} {{ content.mine.area || '' }}
				</view>
				<image :src="`${$util.prefix('public/arrow-right-fill.png')}`"></image>
			</view>
		</view>

		<view class="input flex_r_between">
			<view class="label flex_center">
				<image :src="`${$util.prefix('public/icon_hunyin.png')}`" mode="aspectFill"></image>
				<text>婚姻状况</text>
			</view>
			<picker mode="selector" :range="matchList" @change="onMatchChange">
				<view class="container flex_center">
					<view class="view" :id="content.mine.match ? 'have' : ''">{{content.mine.match || '请选择'}}</view>
					<image :src="`${$util.prefix('public/arrow-right-fill.png')}`"></image>
				</view>
			</picker>
		</view>

		<view class="input flex_r_between">
			<view class="label flex_center">
				<image :src="`${$util.prefix('public/icon_xueli.png')}`" mode="aspectFill"></image>
				<text>学历</text>
			</view>
			<picker mode="selector" :range="educationalList" @change="onEducational">
				<view class="container flex_center">
					<view class="view" :id="content.mine.educational ? 'have' : ''">
						{{ content.mine.educational || '请选择' }}
					</view>
					<image :src="`${$util.prefix('public/arrow-right-fill.png')}`"></image>
				</view>
			</picker>
		</view>

		<!-- <view class="input flex_r_between">
			<view class="label flex_center">
				<image :src="`${$util.prefix('public/icon_jiating.png')}`" mode="aspectFill"></image>
				<text>家庭状况</text>
			</view>
			<view class="container flex_center">
				<input type="text" placeholder="请输入" placeholder-class="input-placeholder" v-model="content.mine.family"
					maxlength="100" />
			</view>
		</view> -->



		<view class="show_more_box" v-show="show_myself_more">
			<view class="input flex_r_between">
				<view class="label flex_center">
					<image :src="`${$util.prefix('public/icon_zhiye.png')}`" mode="aspectFill"></image>
					<text>职业</text>
				</view>
				<view class="container flex_center" @click="onAuth">
					<view class="view" :id="content.mine.category_pname ? 'have' : ''">
						{{ content.mine.category_pname || '请选择'}}{{ content.mine.category_name || '' }}
					</view>
					<image :src="`${$util.prefix('public/arrow-right-fill.png')}`"></image>
				</view>
			</view>

			<view class="input flex_r_between">
				<view class="label flex_center">
					<image :src="`${$util.prefix('public/icon_xingqu.png')}`" mode="aspectFill"></image>
					<text>兴趣爱好</text>
				</view>
				<view class="container flex_center">
					<input type="text" placeholder="请输入" placeholder-class="input-placeholder"
						v-model="content.mine.hobby" maxlength="100" />
				</view>
			</view>

			<view class="input flex_r_between">
				<view class="label flex_center">
					<image :src="`${$util.prefix('public/icon_xingzuo.png')}`" mode="aspectFill"></image>
					<text>星座</text>
				</view>
				<picker mode="selector" :range="constellationList" @change="onConstellation">
					<view class="container flex_center">
						<view class="view" :id="content.mine.constellation ? 'have' : ''">
							{{ content.mine.constellation || '请选择' }}
						</view>
						<image :src="`${$util.prefix('public/arrow-right-fill.png')}`"></image>
					</view>
				</picker>
			</view>

			<view class="input flex_r_between">
				<view class="label flex_center">
					<image :src="`${$util.prefix('public/icon_nianxin.png')}`" mode="aspectFill"></image>
					<text>年薪</text>
				</view>
				<view class="container flex_center">
					<input type="number" placeholder="请输入" placeholder-class="input-placeholder"
						v-model="content.mine.salary" />
					<view class="text_label">万元</view>
				</view>
			</view>

			<view class="input flex_r_between">
				<view class="label flex_center">
					<image :src="`${$util.prefix('public/icon_caichan.png')}`" mode="aspectFill"></image>
					<text>财产状况</text>
				</view>
				<view class="container flex_center">
					<input type="text" placeholder="请输入" placeholder-class="input-placeholder"
						v-model="content.mine.property" />
				</view>
			</view>

		</view>

		<view class="show_more flex_r_around" @click="show_myself_more = !show_myself_more">
			<view class="flex_center">
				<text>{{ show_myself_more ? '收起' : '更多信息' }}</text>
				<u-icon :name=" show_myself_more ? 'arrow-up' : 'arrow-down' " color="#666666" size="20rpx"></u-icon>
			</view>
		</view>



		<view class="title">对方要求</view>

		<view class="input flex_r_between">
			<view class="label flex_center">
				<image :src="`${$util.prefix('public/icon_shengao.png')}`" mode="aspectFill"></image>
				<text>身高</text>
			</view>
			<view class="container flex_center">
				<input type="number" placeholder="请输入" placeholder-class="input-placeholder"
					v-model="content.other.other_height" />
				<view class="text_label">cm</view>
			</view>
		</view>

		<view class="input flex_r_between">
			<view class="label flex_center">
				<image :src="`${$util.prefix('public/icon_nianling.png')}`" mode="aspectFill"></image>
				<text>年龄</text>
			</view>
			<view class="container flex_center">
				<input type="number" placeholder="请输入" placeholder-class="input-placeholder"
					v-model="content.other.other_age" />
				<view class="text_label">岁</view>
			</view>
		</view>

		<view class="input flex_r_between">
			<view class="label flex_center">
				<image :src="`${$util.prefix('public/icon_jiaxiang.png')}`" mode="aspectFill"></image>
				<text>家乡</text>
			</view>
			<view class="container flex_center" @click="chooseOtherAddress">
				<view class="view" :id="content.other.other_province ? 'have' : ''">
					{{ content.other.other_province || '请选择' }}
					{{ content.other.other_city || '' }} {{ content.other.other_area || '' }}
				</view>
				<image :src="`${$util.prefix('public/arrow-right-fill.png')}`"></image>
			</view>
		</view>

		<view class="input flex_r_between">
			<view class="label flex_center">
				<image :src="`${$util.prefix('public/icon_hunyin.png')}`" mode="aspectFill"></image>
				<text>婚姻状况</text>
			</view>
			<picker mode="selector" :range="matchList" @change="onOtherMatchChange">
				<view class="container flex_center">
					<view class="view" :id="content.other.other_match ? 'have' : ''">
						{{content.other.other_match || '请选择'}}
					</view>
					<image :src="`${$util.prefix('public/arrow-right-fill.png')}`"></image>
				</view>
			</picker>
		</view>

		<view class="input flex_r_between">
			<view class="label flex_center">
				<image :src="`${$util.prefix('public/icon_xueli.png')}`" mode="aspectFill"></image>
				<text>学历</text>
			</view>
			<picker mode="selector" :range="educationalList" @change="onOtherEducational">
				<view class="container flex_center">
					<view class="view" :id="content.other.other_educational ? 'have' : ''">
						{{content.other.other_educational || '请选择'}}
					</view>
					<image :src="`${$util.prefix('public/arrow-right-fill.png')}`"></image>
				</view>
			</picker>
		</view>

		<!-- <view class="input flex_r_between">
			<view class="label flex_center">
				<image :src="`${$util.prefix('public/icon_jiating.png')}`" mode="aspectFill"></image>
				<text>家庭状况</text>
			</view>
			<view class="container flex_center">
				<input type="text" placeholder="请输入" placeholder-class="input-placeholder"
					v-model="content.other.other_family" maxlength="100" />
			</view>
		</view> -->

		<view class="show_more_box" v-show="show_other_more">
			<view class="input flex_r_between">
				<view class="label flex_center">
					<image :src="`${$util.prefix('public/icon_zhiye.png')}`" mode="aspectFill"></image>
					<text>职业</text>
				</view>
				<view class="container flex_center" @click="onOtherAuth">
					<view class="view" :id="content.other.other_category_pname ? 'have' : ''">
						{{ content.other.other_category_pname || '请选择'}}{{ content.other.other_category_name || '' }}
					</view>
					<image :src="`${$util.prefix('public/arrow-right-fill.png')}`"></image>
				</view>
			</view>

			<view class="input flex_r_between">
				<view class="label flex_center">
					<image :src="`${$util.prefix('public/icon_xingqu.png')}`" mode="aspectFill"></image>
					<text>兴趣爱好</text>
				</view>
				<view class="container flex_center">
					<input type="text" placeholder="请输入" placeholder-class="input-placeholder"
						v-model="content.other.other_hobby" maxlength="100" />
				</view>
			</view>

			<view class="input flex_r_between">
				<view class="label flex_center">
					<image :src="`${$util.prefix('public/icon_xingzuo.png')}`" mode="aspectFill"></image>
					<text>星座</text>
				</view>
				<picker mode="selector" :range="constellationList" @change="onOtherConstellation">
					<view class="container flex_center">
						<view class="view" :id="content.other.other_constellation ? 'have' : ''">
							{{content.other.other_constellation || '请选择'}}
						</view>
						<image :src="`${$util.prefix('public/arrow-right-fill.png')}`"></image>
					</view>
				</picker>
			</view>

			<view class="input flex_r_between">
				<view class="label flex_center">
					<image :src="`${$util.prefix('public/icon_nianxin.png')}`" mode="aspectFill"></image>
					<text>年薪</text>
				</view>
				<view class="container flex_center">
					<input type="number" placeholder="请输入" placeholder-class="input-placeholder"
						v-model="content.other.other_salary" />
					<view class="text_label">万元</view>
				</view>
			</view>

			<view class="input flex_r_between">
				<view class="label flex_center">
					<image :src="`${$util.prefix('public/icon_caichan.png')}`" mode="aspectFill"></image>
					<text>财产状况</text>
				</view>
				<view class="container flex_center">
					<input type="text" placeholder="请输入" placeholder-class="input-placeholder"
						v-model="content.other.other_property" />
				</view>
			</view>

		</view>

		<!-- <view class="show_more flex_r_around" @click="show_other_more = !show_other_more">
			<view class="flex_center">
				<text>{{ show_other_more ? '收起' : '更多信息' }}</text>
				<u-icon :name=" show_other_more ? 'arrow-up' : 'arrow-down' " color="#666666" size="20rpx"></u-icon>
			</view>
		</view> -->

		<view class="input flex_r_between">
			<view class="label flex_center">
				<image :src="`${$util.prefix('public/icon_quanzi.png')}`" mode="aspectFill"></image>
				<text>选择圈子</text>
			</view>
			<!-- $util.toUrl('/pages/partner/circle?pub_type=3') -->
			<view class="container flex_center" @click="readyChooseCircle">
				<view class="view flex_center" v-if="circle.id">
					<image :src="circle.avatar" mode="aspectFill"></image>
					<text class="hidden">{{ circle.name }}</text>
				</view>
				<view class="view" v-else>请选择</view>
				<image :src="`${$util.prefix('public/arrow-right-fill.png')}`"></image>
			</view>
		</view>

		<view class="input flex_r_between" v-if="circle.id && showCommerce()">
			<view class="label flex_center">
				<image :src="`${$util.prefix('public/icon_daihuo.png')}`" mode="aspectFill"></image>
				<text>带链接</text>
			</view>
			<view class="container flex_center" @click="show_commerce = true">
				<view class="view" v-if="!action_type">如：商品、活动</view>
				<view class="view flex_center" v-if="action_type == 1">
					<image :src="$util.getAvatar(action.goods_image)" mode="aspectFill"></image>
					<text class="hidden">{{ action.name }}</text>
				</view>
				<view class="view flex_center" v-if="action_type == 2">
					<image :src="$util.getAvatar(action.image)" mode="aspectFill"></image>
					<text class="hidden">{{ action.title }}</text>
				</view>
				<image :src="`${$util.prefix('public/arrow-right-fill.png')}`"></image>
			</view>
		</view>

		<view class="btn" @click="beforeSubmit">确定</view>

		<w-compress ref='wCompress' />

		<!-- 职业选择 -->
		<u-picker keyName="name" :show="auth_picker_show" ref="uPicker" :columns="authTypeColumn" @confirm="confirmAuth"
			@change="changeAuthColumn" @cancel="auth_picker_show = false" @close="auth_picker_show = false"
			:closeOnClickOverlay="true"></u-picker>


		<u-picker keyName="name" :show="other_auth_picker_show" ref="uPickerOther" :columns="otherAuthTypeColumn"
			@confirm="confirmOtherAuth" @change="changeOtherAuthColumn" @cancel="other_auth_picker_show = false"
			@close="other_auth_picker_show = false" :closeOnClickOverlay="true"></u-picker>

		<u-modal :show="show_back" title="提示" content='发布成功' :closeOnClickOverlay="true" cancelText="我知道了"
			:showConfirmButton='false' :showCancelButton='true' @close="show_back = false"
			@cancel="show_back = false"></u-modal>

		<view @touchmove.stop.prevent="preventHandler">
			<u-popup :safeAreaInsetBottom="false" :show="show_circle" :round="10" mode="bottom"
				@close="show_circle = false">
				<view class="circle_popup">
					<circleChoose @selectCircle="selectCircle" :overlayOpacity="0" closeIconPos="top-right"
						:closeable="true" :pub_type="3"></circleChoose>
				</view>
			</u-popup>
		</view>

		<view @touchmove.stop.prevent="preventHandler">
			<u-popup :safeAreaInsetBottom="false" :show="show_commerce" :round="10" mode="bottom"
				@close="show_commerce = false">
				<view class="circle_popup">
					<commerceChoose @selectCommerce="selectCommerce" :overlayOpacity="0" closeIconPos="top-right"
						:closeable="true" :circle="circle"></commerceChoose>
				</view>
			</u-popup>
		</view>

		<u-popup :safeAreaInsetBottom="false" mode="bottom" :show="to_pay_show" @close="to_pay_show = false"
			bgColor="transparent">
			<view class="to_pay_show flex_c">
				<view class="title">支付</view>
				<view class="price">
					<i>￥</i>
					<text>{{ Number(order_price).toFixed(2) }}</text>
				</view>
				<view class="pay_type">

					<view class="item flex_r_between" @click="pay_type = 1">
						<view class="left flex_center">
							<image src="/static/public/wechat.png"></image>
							<text>微信</text>
						</view>

						<view class="right flex_center">
							<text></text>
							<image :src="`/static/public/select${pay_type == 1 ? '_s' : ''}.png`"></image>
						</view>
					</view>

					<view class="item flex_r_between" @click="pay_type = 2">
						<view class="left flex_center">
							<image src="/static/public/alipay.png"></image>
							<text>支付宝</text>
						</view>

						<view class="right flex_center">
							<text></text>
							<image :src="`/static/public/select${pay_type == 2 ? '_s' : ''}.png`"></image>
						</view>
					</view>


				</view>
				<view class="btn" @click="toPay">确认支付</view>
			</view>
		</u-popup>

		<cc-city-picker ref="mpvueCityPicker" @onConfirm="onConfirm"></cc-city-picker>

		<cc-city-picker ref="mpvueCityPickerOther" @onConfirm="onConfirmOther"></cc-city-picker>

	</view>



</template>

<script>
	import WCompress from '@/components/w-compress/w-compress.vue';
	import circleChoose from '../circle.vue';
	import commerceChoose from '../commerce.vue';
	export default {

		watch: {
			authType(newValue, oldValue) {
				// 个人
				this.authTypeColumn[0] = this.authType;
				this.authTypeColumn[1] = this.authType[0].child;
				this.authTypeColumn = JSON.parse(JSON.stringify(this.authTypeColumn));
				// 对方
				this.otherAuthTypeColumn[0] = this.authType;
				this.otherAuthTypeColumn[1] = this.authType[0].child;
				this.otherAuthTypeColumn = JSON.parse(JSON.stringify(this.otherAuthTypeColumn));
			}
		},

		data() {
			return {

				id: 0,

				show_circle: false,
				show_commerce: false,

				show_back: false,

				images: [],

				// 个人介绍
				introduce: '',

				// 未婚 离异 丧偶
				matchList: ['未婚', '离异', '丧偶'],
				// 学历
				educationalList: ['小学', '初中', '高中', '专科', '本科', '研究生', '硕士', '博士'],
				// 星座
				constellationList: [
					'水瓶座', '双鱼座', '白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座'
				],
				// 职业认证分类
				auth_picker_show: false,
				other_auth_picker_show: false,
				authType: [],
				authTypeColumn: [
					[],
					[]
				],
				otherAuthTypeColumn: [
					[],
					[]
				],

				show_myself_more: true,
				show_other_more: true,

				// 圈子 ID
				circle: {},
				// 带货相关
				action_type: 0,
				action: {},


				// 字段
				content: {

					mine: {
						// 身高
						height: '',
						// 年级
						age: '',

						// 省市区
						province: '',
						city: '',
						area: '',

						// 婚姻
						match: '',

						// 学历
						educational: '',

						// 家庭状况
						family: '',

						// 分类
						category_pname: '',
						category_name: '',
						category_pid: 0,
						category_id: 0,

						// 兴趣爱好
						hobby: '',

						// 星座
						constellation: '',

						// 年薪
						salary: '',

						// 财产状况
						property: '',
					},

					other: {
						// 他人资料
						other_height: '',
						// 年级
						other_age: '',

						// 省市区
						other_province: '',
						other_city: '',
						other_area: '',

						// 婚姻
						other_match: '',

						// 学历
						other_educational: '',

						// 家庭状况
						other_family: '',

						// 分类
						other_category_pname: '',
						other_category_name: '',
						other_category_pid: 0,
						other_category_id: 0,

						// 兴趣爱好
						other_hobby: '',

						// 星座
						other_constellation: '',

						// 年薪
						other_salary: '',

						// 财产状况
						other_property: '',
					}
				},

				// 修改支付
				to_pay_show: false,
				order_id: 0,
				order_price: 0,
				pay_type: 1,

				// 用户资料
				user: {},

			}

		},

		components: {
			WCompress,
			circleChoose,
			commerceChoose,
		},

		methods: {

			// 回显
			getDetail(data) {

				this.id = data.id;

				if (data.content.mine) {
					this.content = data.content;
				}

				// 图片
				if (data.images.indexOf(',') > -1) {
					this.images = data.images.split(',');
				} else {
					this.images = [data.images];
				}

				// 个人介绍
				this.introduce = data.introduce;
				// article_link_pub 发布权限:1=允许所有发布，2=仅自己发布
				// owner_uid 圈主 uid
				this.circle = {
					id: data.circle_id,
					avatar: data.cavatar,
					name: data.name,
					article_link_pub: data.article_link_pub,
					owner_uid: data.owner_uid,
				};

				this.action = data.action;
				this.action_type = data.action_type;
			},


			// 选择图片上传
			chooseImage() {
				this.$native.authorize('photos');
				var count = 9 - this.images.length;
				uni.chooseImage({
					count: count,
					success: (file) => {
						file.tempFilePaths.forEach(element => {
							this.$refs.wCompress.start(element, {
								pixels: 2000000, // 最大分辨率，默认二百万
								quality: 0.6, // 压缩质量，默认0.8
								type: 'png', // 图片类型，默认jpg
								// base64: false, // 是否返回base64，默认false，非H5有效
							}).then(url => {
								this.$upload(url, {
									type: 'picture'
								}).then(res => {
									if (res.status == 2 || res.status == 1) {
										this.images.push(res.result.url);
									} else {
										this.$util.msg(res.msg);
									}
								});
							});

						})

					}
				})
			},

			// 删除
			onDeleteImage(index) {
				this.images.splice(index, 1);
			},

			// 家乡选择
			chooseAddress() {
				this.$refs.mpvueCityPicker.show()
			},

			onConfirm(e) {
				var arr = e.label.split('-');
				this.content.mine.province = arr[0];
				this.content.mine.city = arr[1];
				this.content.mine.area = arr[2];
			},

			// 婚姻选择
			onMatchChange(e) {
				this.content.mine.match = this.matchList[e.detail.value];
			},

			// 学历选择
			onEducational(e) {
				this.content.mine.educational = this.educationalList[e.detail.value];
			},

			// 星座选择
			onConstellation(e) {
				this.content.mine.constellation = this.constellationList[e.detail.value];
			},

			// 职业选择竖排切换
			onAuth() {
				this.auth_picker_show = true;
			},

			changeAuthColumn(e) {
				if (e.columnIndex == 0) {
					var picker = this.$refs.uPicker;
					picker.setColumnValues(1, this.authType[e.index].child)
				}
			},

			confirmAuth(e) {
				this.content.mine.category_pname = e.value[0].name;
				this.content.mine.category_pid = e.value[0].id;
				this.content.mine.category_name = e.value[1].name;
				this.content.mine.category_id = e.value[1].id;
				this.auth_picker_show = false;
			},


			// 他人资料
			// 选择地址
			chooseOtherAddress() {
				this.$refs.mpvueCityPickerOther.show()
			},

			onConfirmOther(e) {
				var arr = e.label.split('-');
				this.content.other.other_province = arr[0];
				this.content.other.other_city = arr[1];
				this.content.other.other_area = arr[2];
			},


			// 婚姻选择（他人）
			onOtherMatchChange(e) {
				this.content.other.other_match = this.matchList[e.detail.value];
			},

			// 学历选择（他人）
			onOtherEducational(e) {
				this.content.other.other_educational = this.educationalList[e.detail.value];
			},

			// 星座选择（他人）
			onOtherConstellation(e) {
				this.content.other.other_constellation = this.constellationList[e.detail.value];
			},

			onOtherAuth() {
				this.other_auth_picker_show = true;
			},

			changeOtherAuthColumn(e) {
				if (e.columnIndex == 0) {
					var picker = this.$refs.uPickerOther;
					picker.setColumnValues(1, this.authType[e.index].child)
				}
			},

			confirmOtherAuth(e) {
				this.content.other.other_category_pname = e.value[0].name;
				this.content.other.other_category_pid = e.value[0].id;
				this.content.other.other_category_name = e.value[1].name;
				this.content.other.other_category_id = e.value[1].id;
				this.other_auth_picker_show = false;
			},

			onSubmit(pay) {

				if (!this.images.length) {
					return this.$util.msg('请上传图片');
				}

				if (!this.introduce) {
					return this.$util.msg('请填写介绍');
				}

				if (!this.content.mine.height) {
					return this.$util.msg('请填写您的身高');
				}

				if (!this.content.other.other_height) {
					return this.$util.msg('请填写对方身高');
				}

				if (!this.content.mine.age) {
					return this.$util.msg('请填写您的年龄');
				}

				if (!this.content.other.other_age) {
					return this.$util.msg('请填写对方年龄');
				}

				if (!this.content.mine.province) {
					return this.$util.msg('请填写您的家乡');
				}

				if (!this.content.other.other_province) {
					return this.$util.msg('请填写对方家乡');
				}

				if (!this.content.mine.match) {
					return this.$util.msg('请填写您的婚姻状况');
				}

				if (!this.content.other.other_match) {
					return this.$util.msg('请填写对方婚姻状况');
				}

				if (!this.content.mine.educational) {
					return this.$util.msg('请填写您的学历');
				}

				if (!this.content.other.other_educational) {
					return this.$util.msg('请填写对方学历');
				}

				// if (!this.content.mine.family) {
				// 	return this.$util.msg('请填写您的家庭状况');
				// }

				// if (!this.content.other.other_family) {
				// 	return this.$util.msg('请填写对方家庭状况');
				// }

				// if (!this.circle.id) {
				// 	return this.$util.msg('请选择要发布的圈子');
				// }


				uni.showLoading({
					mask: true
				});
				this.$post('/circle.circle_call_card/createCard', {
					circle_id: this.circle.id || 0,
					type: 2,
					images: this.images.join(','),
					introduce: this.introduce,
					action_type: this.action_type == 3 ? 1 : this.action_type,
					action_id: this.action.id || 0,
					content: JSON.stringify(this.content),
					id: this.id,
					is_pay: pay ? 1 : 0,
				}, true, (res) => {
					uni.hideLoading();
					if (res.code == 2010) {
						this.order_id = res.data.id;
						this.order_price = res.data.price;
						this.to_pay_show = true;
					} else if (res.code == 401) {
						this.$native.toJinBiRecharge();
						uni.hideLoading();
					}
				}).then(res => {
					if (this.id && this.id != '0') {
						this.$native.setCardSuccess();
					}
					uni.hideLoading();
					this.show_back = true;
				});
			},

			selectCommerce(map) {
				this.action = map.action;
				this.action_type = map.action_type;
				this.show_commerce = false;
			},

			// 选择卡片
			selectCircle(circle) {
				this.circle = circle;
				this.show_circle = false;
			},

			readyChooseCircle() {
				if (this.id && this.id != '0') {
					return this.$util.msg('无法修改圈子');
				}
				this.show_circle = true;
			},

			preventHandler() {
				return;
			},

			// 调用原生支付
			toPay() {
				uni.showLoading({
					mask: true
				});
				this.$post('/pay/sendCallCard', {
					pay_type: this.pay_type,
					order_id: this.order_id
				}, true, () => {
					uni.hideLoading();
				}).then(res => {
					this.$native.toPayCard({
						data: res.data,
						pay_type: this.pay_type
					});
				});
			},

			paySuccess() {
				this.to_pay_show = false;
				this.show_back = true;
				this.onSubmit(true);
				uni.hideLoading();
			},

			payFail() {
				uni.hideLoading();
			},

			getList() {
				this.$get('/circle.circle/getPubCircleList', {
					page: this.page,
					pub_type: this.pub_type
				}).then(res => {
					if (res.data.data.length) {
						res.data.data.forEach(element => {
							if (element.type == 1) {
								if (!this.id || this.id == '0') {
									this.circle = element;
								}
							}
						});
					}
				});
			},

			showCommerce() {
				// article_link_open 是否开放连接:0=否，1=开放
				// article_link_pub 发布权限:1=允许所有发布，2=仅自己发布
				// owner_uid 圈主 uid

				if (this.circle.article_link_pub == 1) {
					return true;
				} else if (this.circle.article_link_pub == 2) {
					if (this.user.id == this.circle.owner_uid) {
						return true;
					}
				}

				return false;
			},

			beforeSubmit() {
				//  DK：先别管 code 了 不会报错    2024.11.30

				if (this.id && this.id != '0') {
					this.toSubmit();
				} else {
					this.$get('/circle.circle_call_card/getCardStatus', {
						circle_id: this.circle.id
					}, false, (res) => {
						if (res.data.is_have > 0) {
							uni.showModal({
								content: '当前圈子已发布过名片,再次发布将会覆盖已有卡片',
								confirmText: '继续提交',
								cancelText: '暂不提交',
								success: (modal) => {
									if (modal.confirm) {
										this.toSubmit();
									}
								}
							});
						} else {
							this.toSubmit();
						}
					}).then(res => {
						uni.showModal({
							content: '当前圈子已发布过名片,再次发布将会覆盖已有卡片',
							confirmText: '我知道了',
							showCancel: false
						});
					});
				}
			},



			toSubmit() {

				if (!this.images.length) {
					return this.$util.msg('请上传图片');
				}

				if (!this.introduce) {
					return this.$util.msg('请填写介绍');
				}

				if (!this.content.mine.height) {
					return this.$util.msg('请填写您的身高');
				}

				if (!this.content.other.other_height) {
					return this.$util.msg('请填写对方身高');
				}

				if (!this.content.mine.age) {
					return this.$util.msg('请填写您的年龄');
				}

				if (!this.content.other.other_age) {
					return this.$util.msg('请填写对方年龄');
				}

				if (!this.content.mine.province) {
					return this.$util.msg('请填写您的家乡');
				}

				if (!this.content.other.other_province) {
					return this.$util.msg('请填写对方家乡');
				}

				if (!this.content.mine.match) {
					return this.$util.msg('请填写您的婚姻状况');
				}

				if (!this.content.other.other_match) {
					return this.$util.msg('请填写对方婚姻状况');
				}

				if (!this.content.mine.educational) {
					return this.$util.msg('请填写您的学历');
				}

				if (!this.content.other.other_educational) {
					return this.$util.msg('请填写对方学历');
				}

				// if (!this.content.mine.family) {
				// 	return this.$util.msg('请填写您的家庭状况');
				// }

				// if (!this.content.other.other_family) {
				// 	return this.$util.msg('请填写对方家庭状况');
				// }

				if (!this.circle.id) {
					return this.$util.msg('请选择要发布的圈子');
				}

				this.$util.toUrl(`/pages/partner/preview?data=${JSON.stringify({
					images: this.images,
					introduce: this.introduce,
					circle: this.circle,
					action_type: this.action_type,
					action: this.action,
					content: this.content,
					id: this.id,
					type: 2,
				})}`);
			},

		},

		created() {
			this.getList();
		}
	}
</script>

<style lang="less" scoped>
	.content {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 34rpx 24rpx 24rpx;
		margin-bottom: 20rpx;

		.header {
			margin-bottom: 22rpx;

			text {
				font-size: 28rpx;
				color: #131313;
			}

		}

		.image {
			flex-wrap: wrap;

			.photos {
				width: 176rpx;
				height: 176rpx;
				margin: 16rpx;

				image {
					width: 176rpx;
					height: 176rpx;
				}
			}

			.image_item {
				position: relative;
				margin: 16rpx;

				image {
					width: 176rpx;
					height: 176rpx;
					border-radius: 16rpx;
					background: #F3F3F3;
				}

				.detele {
					width: 48rpx;
					height: 48rpx;
					border-radius: 24rpx;
					background: #FFFFFF;
					position: absolute;
					top: -24rpx;
					right: -24rpx;
					z-index: 6;
				}
			}
		}

	}

	.textarea {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 24rpx;

		textarea {
			max-width: 100%;
			height: 260rpx;
			font-size: 28rpx;
			color: #333;
			line-height: 32rpx;
		}
	}

	.title {
		font-weight: 500;
		font-size: 28rpx;
		color: #131313;
		line-height: 34rpx;
		padding: 32rpx 0 12rpx;
	}

	.show_more {
		padding: 32rpx 0 12rpx;

		text {
			font-size: 24rpx;
			color: #666666;
			line-height: 34rpx;
		}
	}

	.input {
		height: 100rpx;
		padding: 0 32rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 20rpx;

		.label {
			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 16rpx;
			}

			text {
				font-size: 28rpx;
				color: #131313;
			}
		}

		.container {
			flex: 1;
			overflow: hidden;

			.text_label {
				color: #333;
				font-size: 28rpx;
				margin-left: 12rpx;
			}

			image {
				width: 24rpx;
				height: 24rpx;
				margin-left: 8rpx;
			}

			#have {
				color: #333;
			}

			.view {
				flex-direction: row-reverse;
				font-size: 28rpx;
				color: #999999;
				text-align: right;
				flex: 1;
				overflow: hidden;

				image {
					flex-shrink: 0;
					width: 48rpx;
					height: 48rpx;
					border-radius: 24rpx;
				}

				text {
					color: #999999;
				}
			}

			input {
				flex: 1;
				font-size: 28rpx;
				color: #333;
				text-align: right;
			}
		}
	}

	.btn {
		margin: 60rpx auto 0;
		width: 560rpx;
		height: 100rpx;
		background: #FD2A53;
		border-radius: 50rpx;
		border: 2rpx solid #FD2A53;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 100rpx;
		text-align: center;
	}

	.circle_popup {
		height: 60vh;
	}

	.to_pay_show {
		padding: 32rpx 32rpx 64rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;

		.title {
			font-weight: 500;
			font-size: 32rpx;
			color: #131313;
			line-height: 44rpx;
		}

		.price {
			margin: 34rpx 0 24rpx;

			i {
				font-weight: 500;
				font-size: 36rpx;
				color: #131313;
				line-height: 50rpx;
				font-style: normal;
			}

			text {
				font-weight: 500;
				font-size: 64rpx;
				color: #131313;
				line-height: 50rpx;
			}
		}

		.pay_type {
			background: #F8F8F8;
			border-radius: 16rpx;
			width: 100%;
			margin: 0 32rpx 64rpx;

			.item {
				height: 100rpx;
				padding: 0 32rpx;

				.left {
					image {
						width: 48rpx;
						height: 48rpx;
						margin-right: 16rpx;
					}

					text {
						font-size: 28rpx;
						color: #131313;
						line-height: 32rpx;
					}
				}

				.right {
					image {
						width: 40rpx;
						height: 40rpx;
					}

					text {
						font-size: 28rpx;
						color: #131313;
						line-height: 32rpx;
						margin-right: 30rpx;
					}
				}
			}
		}

		.btn {
			width: 560rpx;
			height: 96rpx;
			background: #FD2A53;
			border-radius: 50rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
		}

	}
</style>